<template>
    <div>
      <!--头部 开始-->
      <header class="fix">
        <a href="javascript:history.go(-1);" class="returnBtn"></a>
        营销助手
      </header>
      <!--头部 结束-->
      <!--中间 开始-->
      <main>
        <div class="maketingMain" id="navcon04">
          <div class="maketingNav fix">
            <a href="javascript:void(0);" class="Cur">热销产品</a>
            <a href="javascript:void(0);">近期访客</a>
          </div>
          <div class="maketingCont">
            <div class="contInfo" style="display: block;">
              <a href="#">
                <div class="infoLeft">
                  <img src="../../images/temporary/commodity9.png">
                </div>
                <div class="infoRight">
                  <div class="infoTitle">
                    <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                    <span>￥<em>118</em>.80</span>
                  </div>
                  <span class="promotion">推广赚¥14.26</span>
                  <p class="advantage">热门开单利器，分享的不二之选</p>
                </div>
              </a>
              <a href="#">
                <div class="infoLeft">
                  <img src="../../images/temporary/commodity9.png">
                </div>
                <div class="infoRight">
                  <div class="infoTitle">
                    <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                    <span>￥<em>118</em>.80</span>
                  </div>
                  <span class="promotion">推广赚¥14.26</span>
                  <p class="advantage">热门开单利器，分享的不二之选</p>
                </div>
              </a>
              <a href="#">
                <div class="infoLeft">
                  <img src="../../images/temporary/commodity9.png">
                </div>
                <div class="infoRight">
                  <div class="infoTitle">
                    <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                    <span>￥<em>118</em>.80</span>
                  </div>
                  <span class="promotion">推广赚¥14.26</span>
                  <p class="advantage">热门开单利器，分享的不二之选</p>
                </div>
              </a>
              <a href="#">
                <div class="infoLeft">
                  <img src="../../images/temporary/commodity9.png">
                </div>
                <div class="infoRight">
                  <div class="infoTitle">
                    <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                    <span>￥<em>118</em>.80</span>
                  </div>
                  <span class="promotion">推广赚¥14.26</span>
                  <p class="advantage">热门开单利器，分享的不二之选</p>
                </div>
              </a>
              <a href="#">
                <div class="infoLeft">
                  <img src="../../images/temporary/commodity9.png">
                </div>
                <div class="infoRight">
                  <div class="infoTitle">
                    <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                    <span>￥<em>118</em>.80</span>
                  </div>
                  <span class="promotion">推广赚¥14.26</span>
                  <p class="advantage">热门开单利器，分享的不二之选</p>
                </div>
              </a>
              <a href="#">
                <div class="infoLeft">
                  <img src="../../images/temporary/commodity9.png">
                </div>
                <div class="infoRight">
                  <div class="infoTitle">
                    <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                    <span>￥<em>118</em>.80</span>
                  </div>
                  <span class="promotion">推广赚¥14.26</span>
                  <p class="advantage">热门开单利器，分享的不二之选</p>
                </div>
              </a>

            </div>
            <div class="contInfo">
              <!--暂无访客记录-->
              <div class="noTime" style="display: none;">
                <img src="../../images/secondLevel/noTimeIcon.png">
                <p>暂无访客记录</p>
              </div>
              <!--内容-->
              <div class="nearFuture">
                <div class="nearFuturePeo">
                  <div class="peoHead"><img src="../../images/temporary/7.jpg"></div>
                  <div class="peoName">
                    <h3>李宗林</h3>
                    <div class="days"><em>新用户</em><span>32天前访问</span></div>
                  </div>
                  <em class="triangle"></em>
                </div>
                <div class="futureLike">
                  <em class="likeTitle">他可能喜欢</em>
                  <div class="futureList">
                    <a href="#">
                      <div class="infoLeft">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <div class="infoRight">
                        <div class="infoTitle">
                          <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                          <span>￥<em>118</em>.80</span>
                        </div>
                        <span class="promotion">推广赚¥14.26</span>
                      </div>
                    </a>
                    <a href="#">
                      <div class="infoLeft">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <div class="infoRight">
                        <div class="infoTitle">
                          <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                          <span>￥<em>118</em>.80</span>
                        </div>
                        <span class="promotion">推广赚¥14.26</span>
                      </div>
                    </a>
                    <a href="#">
                      <div class="infoLeft">
                        <img src="../../images/temporary/commodity9.png">
                      </div>
                      <div class="infoRight">
                        <div class="infoTitle">
                          <p>百分百进口美棉 空气感纯棉卫生棉套装（日用3包+夜用</p>
                          <span>￥<em>118</em>.80</span>
                        </div>
                        <span class="promotion">推广赚¥14.26</span>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!--中间 结束-->
    </div>
</template>

<script>
  import $ from 'jquery'
    export default {
      name: "marketing",
    methods:{
          /*营销助手 tab切换*/
      markeingTab: function (){
        var $li = $('.maketingNav a');
        var $ul = $('.maketingCont .contInfo');
        $("#navcon04").css('height',$ul.eq(0).height())
        $li.click(function(){
          var $this = $(this);
          var $t = $this.index();
          $li.removeClass();
          $this.addClass('Cur');
          $ul.css('display','none');
          $ul.eq($t).css('display','block');
          $("#navcon04").css('height',$ul.eq($t).height())
        })
      },
  },
      mounted:function () {
        this.markeingTab()
        $('.nearFuture .nearFuturePeo').on('click',function(){
          if ($(this).next().css('display') == "none") {
            //展开未展开
            $('.nearFuture').children('.futureLike').slideUp();
            $(this).next('.futureLike').slideDown();
          }else{
            //收缩已展开
            $(this).next('.futureLike').slideUp();
          }
        });
      }

    }
</script>

<style scoped>
  @import "../../css/common/common.css";
@import "../../css/other/fragmentary.css";
</style>
